---
title: "Install Tailwind CSS with Rails"
description: "Setting up Tailwind CSS in a Rails project."
tool: Rails
---

<!--
#####
Launch day test: it works with the normal tailwindcss package 🎉
#####
-->

# Using Tailwind CSS with Rails

## Creating your project

Start by creating a new Rails project if you don't have one set up already. The most common approach is to use the [Rails CLI](https://guides.rubyonrails.org/command_line.html#rails-new):

```shell
rails new my-project
```

## Setting up Tailwind CSS

Install Tailwind using `npm` or `yarn`:

```shell
yarn add tailwindcss
```

Next, let's add Tailwind to our project's `postcss.config.js` file:

```diff-js
  module.exports = {
    plugins: [
      require('postcss-import'),
+     require('tailwindcss'),
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3
      })
    ]
  }

```

Next, let's create a default Tailwind config file:

```shell
npx tailwindcss init
```

In our Rails project, let's create a new file called `tailwind.css` inside the `app/javascript/styles` directory. This file will contain three `@tailwind` declaratives:

```css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
```

Next, let's import this file in our application JavaScript pack (`app/javascript/packs/application.js`):

```diff-js
  require("@rails/ujs").start();
  require("turbolinks").start();
  require("@rails/activestorage").start();
  require("channels");
+ require("../styles/tailwind.css");

```

Finally, in our application layout file (`rails/app/views/layouts/application.html.erb`), let's replace the `stylesheet_link_tag` with the `stylesheet_pack_tag`:

```diff-html
  <html>
    <head>
      <title>RailsApp</title>
      <!-- ... -->

-     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+     <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    </head>

    <!-- ... -->
  </html>
```

That's it! Tailwind CSS is now available throughout our entire Rails application 🎉
